<template>
	<view class="container">
		<navbar></navbar>
		<view class="left">
			<image src="/static/product/c5.png" mode="widthFix" class="center-img" alt="左侧图片"></image>
			<view class="product-desc">坐拥海量货源不愁单，智能托管省人工，高效运营结算快，平台赋能稳赚钱！</view>
			<view class="agree">
				<label>
					<checkbox value="" />
					<text>同意并阅读“仓配服务商注册协议”</text>
				</label>
			</view>
		</view>
		<view class="right">
			<view class="page-header">
				<view class="header-title">仓库信息注册</view>
			</view>

			<view class="form-container">
				<view class="form-group">
					<view class="form-label">仓库编码</view>
					<view class="form-input">
						<input v-model="formData.code" disabled="true" placeholder="仓库编码" />
					</view>
				</view>

				<view class="form-group">
					<view class="form-label">仓库名称</view>
					<view class="form-input">
						<input v-model="formData.warehouse_name" placeholder="请输入仓库名称" required />
					</view>
					<view class="form-input">
						<uni-file-picker
							ref="ctdpic"
							:value="photoPath"
							v-model="formData.ctdCardValue"
							title="营业执照正本或副本(最多2张)"
							:limit="2"
							file-mediatype="image"
							:auto-upload="false"
							mode="grid"
							cloudPath="warehouser_license"
							return-type="Object"
							@select="select"
							@progress="progress"
							@success="success"
							@fail="fail"
							:image-styles="imageStyles"
							provider="warehouse"
						>
							<view class="" style="font-size: 50rpx">+</view>
						</uni-file-picker>
					</view>
				</view>

				<view class="form-group">
					<view class="form-label">仓库地址</view>
					<view class="form-input">
						<input v-model="formData.address" @blur="getAddress" placeholder="请输入仓库详细地址" rows="3" />
					</view>
					<view class="form-input">
						<uni-file-picker
							ref="warehouseOut"
							v-model="formData.images"
							title="仓库照片(最多9张)"
							:limit="9"
							file-mediatype="image"
							:auto-upload="false"
							mode="grid"
							cloudPath="warehouse"
							@select="select"
							@progress="progress"
							@success="success"
							@fail="fail"
							:image-styles="imageStyles"
						>
							<view class="" style="font-size: 50rpx">+</view>
						</uni-file-picker>
					</view>
				</view>

				<view class="form-group">
					<view class="form-label" @click="handleOwn">仓主信息</view>
					<view class="form-input">
						<uni-file-picker
							ref="cardId"
							v-model="cardIdValue"
							title="身份证正反面(最多2张)"
							:limit="2"
							file-mediatype="image"
							:auto-upload="false"
							mode="grid"
							cloudPath="IDcard"
							@select="select"
							@progress="progress"
							@success="success"
							@fail="fail"
							:image-styles="imageStyles"
						>
							<view class="" style="font-size: 50rpx">+</view>
						</uni-file-picker>
					</view>
				</view>

				<view class="form-group">
					<view class="form-label">联系电话</view>
					<view class="form-input">
						<input v-model="formData.telePhone" placeholder="请输入联系电话" type="tel" />
					</view>
				</view>
			</view>

			<view class="form-actions">
				<button class="btn cancel" @click="resetForm">重置</button>
				<button class="btn submit" @click="submitForm">提交注册</button>
			</view>
		</view>

		<footbar></footbar>
	</view>
</template>

<script>
import { errForm, checkTelePhone } from '../../untils/errForm';
const CouldDB = uniCloud.importObject('getDb');
import navbar from '../../components/navbar.vue';
import footbar from '../../components/footbar.vue';
import { store } from '../../uni_modules/uni-id-pages/common/store';
const Amap = uniCloud.importObject('getTokens');
import { test } from '../../untils/test';

export default {
	components: {
		navbar,
		footbar
	},
	computed: {
		userInfo() {
			return store.userInfo;
		}
	},
	watch: {
		ctdCardValue: {
			handler(newval) {
				console.log('ctd', JSON.stringify(newval));
			}
		},
		photoPath: {
			handler(newval) {
				console.log('path', JSON.stringify(newval));
			}
		}
	},
	data() {
		return {
			images: [],
			cardIdValue: [],
			ctdCardValue: [],
			photoPath: [],
			ownshow: false,
			ownView: '',
			formData: {
				code: this.generateCode(),
				warehouse_name: '',
				address: '',
				admin: '',
				telePhone: '',
				images: [],
				cardIdValue: [],
				ctdCardValue: [],
				location: '',
				adcode: ''
			},
			code: '',
			owners: [], // 仓主列表
			ownerNameMap: {},
			imageStyles: {
				width: 100,
				height: 100,
				border: {
					color: '#CCC',
					width: 2,
					style: 'dashed',
					radius: '2px'
				}
			} // 仓主编号到名称的映射
		};
	},

	methods: {
		async getAddress() {
			const address = this.formData.address.trim();
			if (!address || address.length < 6) {
				uni.showToast({
					icon: 'error',
					title: '地址无效'
				});
				return;
			}
			const res = await Amap.getAddressToGps(address);
			if (res.status !== '1' && res.info !== 'OK') {
				uni.showToast({
					icon: 'error',
					title: '地址无效'
				});
				return;
			}
			this.formData.address = res.geocodes[0].formatted_address;
			this.formData.location = res.geocodes[0].location;
		},
		generateCode() {
			// 生成0-9999的随机数
			const randomNum = Math.floor(Math.random() * 10000);
			// 将数字转为字符串并补零至四位
			const paddedNum = randomNum.toString().padStart(4, '0');
			// 组合成最终编码
			const code = `CK${paddedNum}`;
			return code;
		},
		handleOwn() {
			this.ownshow = !this.ownshow;
		},
		resetForm() {
			this.formData = {
				code: this.generateCode(),
				name: '',
				address: '',
				own: '',
				telePhone: ''
			};
			this.ownView = '';
		},
		test,
		// 提交表单
		async submitForm() {
			this.formData = { ...this.formData, admin: this.userInfo._id, user: [{ uid: this.userInfo._id, permission: ['admin'] }], auditStatus: 'applyed' };
			this.$refs.ctdpic.upload();
			const errform = {
				warehouse_name: '仓库名称',
				address: '仓库地址',
				telePhone: '电话号码'
			};
			if (!checkTelePhone(this.formData.telePhone)) {
				console.log('2');
				uni.showToast({
					title: '手机号格式错误',
					icon: 'error'
				});
				return;
			}
			const err = errForm(this.formData, errform);
			if (err.length > 0) {
				uni.showModal({
					title: '请完成必填项',
					content: `${err.map((e) => e.message).join('、')}`
				});
				return;
			}
			try {
				console.log('4');
				uni.showLoading({
					title: '提交中...'
				});
				const res = await CouldDB.regBussiness(this.userInfo._id, 'wms', this.formData);

				if (res.code) {
					uni.showToast({
						title: res.message
					});
					this.resetForm();
					uni.navigateBack();
				} else {
					uni.showToast({
						title: res.errMsg,
						icon: 'error'
					});
				}
			} catch (e) {
				uni.showToast({
					title: e,
					icon: 'error'
				});
			} finally {
				uni.hideLoading();
			}
		},
		select(e) {
			console.log('选择文件：', e);
		},
		// 获取上传进度
		progress(e) {
			console.log('上传进度：', e);
		},

		// 上传成功
		success(e) {
			console.log('上传成功', JSON.stringify(e));
		},

		// 上传失败
		fail(e) {
			console.log('上传失败：', e);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	margin-top: 168rpx;
	width: 100vw;
	min-height: 100vh; /* 确保占满整个视图高度 */
	overflow: hidden; /* 隐藏容器自身滚动条 */
}

.left {
	width: 40%; /* 左侧宽度可调整 */
	height: 100vh; /* 高度与视图一致 */
	display: flex;
	flex-direction: column;
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
	padding: 20rpx;
	background-color: #f5f5f5;
	/* 关键：固定在视图内，不随右侧滚动 */
	position: fixed;
	top: 0;
	left: 0;
	align-self: flex-start;
	.product-desc {
		font-size: 35rpx;
		font-weight: 600;
		color: #333;
		margin: 40rpx;
	}
	.agree {
		font: 28rpx;
		font-weight: 600;
		color: #55aaff;
	}
}
.center-img {
	border-radius: 20rpx;
	width: 95%; /* 图片宽度充满左侧容器 */
	height: auto; /* 高度自动，保持比例 */
	object-fit: contain; /* 完整显示图片，不裁剪 */
}
.right {
	margin-left: 40%;
	width: 60%; /* 右侧宽度可调整 */
	height: 100vh; /* 高度与视图一致 */
	overflow-y: auto; /* 内容超出时显示垂直滚动条 */
	padding: 20rpx 40rpx;
	background-color: #fff;
	margin-bottom: 200rpx;
}

.page-header {
	margin-bottom: 40rpx;
}

.header-title {
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	padding: 20rpx 0;
	border-bottom: 2rpx solid #eee;
}

.form-container {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.form-group {
	margin-bottom: 30rpx;
}

.form-label {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 15rpx;
	font-weight: 600;
	display: block;
}

.form-input {
	position: relative;
}

.form-input input,
.form-input textarea {
	width: 100%;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 32rpx;
	background-color: #f9f9f9;
	transition: border-color 0.3s;
}

.form-input input {
	height: 80rpx;
}

.form-input textarea {
	height: 200rpx;
	padding: 20rpx;
	resize: none;
}

.form-input input:focus,
.form-input textarea:focus {
	border-color: #55aaff;
	outline: none;
}

.form-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 32rpx;
	color: #666;
	background-color: #f9f9f9;
	position: relative;
	transition: border-color 0.3s;
}

.form-select:focus {
	border-color: #55aaff;
}

.select-arrow {
	width: 32rpx;
	height: 32rpx;
	color: #999;
}

.form-actions {
	display: flex;
	justify-content: space-between;
	padding: 40rpx 30rpx 20rpx;
	background-color: #fff;
	margin-top: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.btn {
	flex: 1;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	margin: 0 20rpx;
	font-weight: 500;
	transition: all 0.3s;
}

.cancel {
	background-color: #f5f5f5;
	color: #666;
	border: 1rpx solid #ddd;
}

.cancel:active {
	background-color: #eee;
}

.submit {
	background-color: #55aaff;
	color: #fff;
	border: none;
}

.submit:active {
	background-color: #3e93d6;
}
</style>
